import React, { useState,useContext  } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input, Toast } from "antd-mobile";
import { reqlogin } from "../../http/api";
import { MyContext } from "../../App";
import { actions } from "../../reducer/app";

export default function Login(props) {

  const [user,setUser]=useState({
    phone:"",
    password:""
  });
  const { dispatch } = useContext(MyContext);
  // 3.登录逻辑
  const doLogin = () => {
    //发请求
    reqlogin(user).then((res) => {
      if (res.data.code == 200) {
        //弹成功
        Toast.show({
          content: res.data.msg,
        });
        //存数据
        dispatch(actions.changeUserInfo(res.data.list));
        //跳转页面
        props.history.push("/index/home");
      }
    });
  };
  return (
    <div>
      <Header title="登录"></Header>

      <Form layout='horizontal'>
        <Form.Item label='用户名' name='username'>
          <Input placeholder='请输入用户名' clearable
          onChange={v=>setUser({
            ...user,
            phone:v
          })}
          />
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable type='password'
          onChange={v=>setUser({
            ...user,
            password:v
          })}
          />
        </Form.Item>
      </Form>
      <Button size="small" color="primary" onClick={()=>doLogin()} >
        登录
      </Button>

    </div>
  )
}
